<template>

    <!-- <h1>头部</h1> -->
     <!-- 容器 -->
     <div class="header" style="display: flex;">
        
        <!-- 左侧 -->
        <div class="header-left" style="width: 1200px;">
            <img src="../assets/logo.png" width="300" alt="" class="header-left-img">
        </div>
        <!-- 右侧 -->
        <div class="header-right" style="position: relative; width: 100px;">
    
            <span style="position: relative; top: 17px;">张三</span>
    
            <!--  <el-dropdown> element提供的实现下拉菜单组件 -->
            <el-dropdown>
                <!-- 展示头像 垂直对齐 -->
                <el-avatar style="position: relative;top: 8px;"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
               
                <!-- <template> 为多个元素添加分组 ,<v-slot:dropdown 或 #dropdown>定义卡槽,展示下拉菜单显示内容 -->
                <!-- 下拉菜单 -->
                <template v-slot:dropdown> 
                <el-dropdown-menu>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                    <el-dropdown-item>详细信息</el-dropdown-item>
                </el-dropdown-menu>
                </template>

                <template #trigger>
                  <span class="el-dropdown-link">
                    点击展开 <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </template>
            </el-dropdown>
        </div>    
    
    
     </div>
    
    </template>
    
    <script setup>
    
    
    </script>
    
    <style scoped>
    .header{
        height: 50px;
        background-color: rgb(101, 166, 241);
    }
    </style>